<template>
  <view class="album-detail">
    
    <!-- 下载进度条 -->
    <view class="progress-container" v-if="isDownloading">
      <view class="progress-text">
        <view class="content-text">
          下载中
        </view>
        <progress :percent="progress.percent" stroke-width="4" activeColor="#850C13" class="progress-warps" />
        <view class="content-text">
          <text style="color: #850C13">{{ progress.current }}</text>/{{ progress.total }}
        </view>
      </view>

    </view>
    <!-- 自定义导航栏 -->
    <view class="custom-nav" v-if="imageList && imageList.length > 0">
      <view class="nav-edit" @click="toggleEditMode">
        <text>{{ isEditMode ? '完成' : '编辑' }}</text>
      </view>
    </view>

    <!-- 操作工具栏 - 只在编辑模式显示 -->
    <view class="action-bar" v-if="isEditMode">
      <view class="action-item" @click="toggleSelectAll">
        <image class="download" src="/static/img/photo-album-check.png" mode="aspectFill"></image>
        <text>全选</text>
      </view>
      <view class="action-item" @click="startBatchDownload" v-if="isDownload">
        <image class="download" src="/static/img/photo-album-download.png" mode="aspectFill"></image>
        <text>下载</text>
      </view>
      <view class="action-item" @click="chooseImage" v-if="isUpload">
        <image class="upload" src="/static/img/photo-album-upload.png" mode="aspectFill"></image>
        <text>上传</text>
      </view>
      <view class="action-item" @click="deleteSelected" v-if="isRemove">
        <image class="del" src="/static/img/photo-album-del.png" mode="aspectFill"></image>
        <text>删除</text>
      </view>
    </view>

    <!-- 图片网格 -->
    <view class="image-grid">
      <view class="image-item" v-for="(item, index) in imageList" :key="index"
        @click="handleImageClick(index, item.id)">
        <image :src="photoAlbumImgUrl(item.id)" mode="aspectFill"></image>
        <!-- 选择框 - 只在编辑模式显示 -->
        <view class="checkbox-wrapper" v-if="isEditMode">
          <checkbox :value="index" :checked="selectedIndices.includes(item.id)" class="round red" />
        </view>
      </view>
    </view>

    <!-- 上传 -->
    <!-- <view class="upload-popup" > -->
      <view class="upload-options" v-if="!isEditMode && isUpload">
        <view class="option-item" @click="chooseImage">
          <image class="upload-white" src="/static/img/photo-album-upload-white.png" mode="aspectFill"></image>
          <text>上传</text>
        </view>
      </view>
    <!-- </view> -->
    <!-- 预览组件 -->
    <view v-if="previewVisible">
      <image-preview :show="previewVisible" :imageList="imageList" :currentIndex="currentPreviewIndex"
        @close="closePreview" @download="downloadImage" @delete="deleteImage" @change="onPreviewIndexChange"
        :delFlag="isRemove" :downloadFlag="isDownload" :paramsObj="paramsObj" />
    </view>
	
    <custom-popup :isShow="showPopup" title="登录密码" position="center" @close="showPopup = false" @cancel="onCancel"
      @confirm="onConfirm">
      <!-- 自定义内容 -->
      <template #body>
        <input class="customize-input" v-model="formData.pwd" placeholder="请输入密码" style="" />
      </template>
    </custom-popup>
  </view>
</template>

<script>

import ImagePreview from './image-preview.vue';
import { downloadSingleImage } from '@/utils/downloadUtil';
// import request from '@/utils/request1'
import CustomPopup from '@/components/popup.vue';
export default {
  components: {
    ImagePreview,
    CustomPopup
  },
  data() {
    return {
      showPopup: false,
      formData: { pwd: '' },
      //最大上传图片数量
      maxLength: 0,
      isRemove: false,// 是否可删除
      isDownload: false,// 是否可下载
      isUpload: false,// 是否可上传
      previewVisible: false, // 预览
      currentPreviewIndex: 0, // 当前图片下标
      isEditMode: false, // 编辑状态
      isAllSelected: false,
      selectedIndices: [],
      imageList: [],
      crrPage: 1,
      listDataLoading: 'loadmore',
      crrId: '',
      isDownloading: false,
      isCanceled: false,
      progress: {
        current: 0,
        total: 0,
        percent: 0,
        speed: '0KB/s'
      },
      progressColor: '#07C160',
      downloadTasks: [],
      maxConcurrent: 12,
      paramsObj: {
        shareCode: '',
        password: '',
      }
    }
  },
  computed: {
    selectedCount() {
      return this.selectedIndices.length
    },
  },
  onShow() {},
  onLoad(e) {
	let copyUrl = 'https://dzxyk.cdu.edu.cn/share/?share=LrwE6G&name=%E6%B5%8B%E8%AF%9527'
	let copyURL = window.location.href;
    const url =  copyURL;
    // 创建 URL 对象
    const urlObj = new URL(url);
    // 获取查询参数
    const params = new URLSearchParams(urlObj.search);
    // 提取参数值
    const shareValue = params.get('share');
    const nameValue = params.get('name'); 
    console.log('获取参数：',shareValue, nameValue);
	  const decodedText = decodeURIComponent(nameValue);
    // 在页面中调用
    uni.setNavigationBarTitle({
      title: decodedText
    })
    // H5专属
    if (process.env.VUE_APP_PLATFORM === 'h5') {
      document.title = decodedText;
    }
    this.paramsObj.shareCode = shareValue
    // this.paramsObj.password = pwdValue
    // this.formData.pwd = pwdValue ? pwdValue : ''
    this.checkCode()
  },
  methods: {
    photoAlbumUrl(id) {
      let password = this.formData.pwd
      let shareCode = this.paramsObj.shareCode

      return (
        "/api/sharePhoto/download?id=" + id +
        "&password=" + password +
        "&shareCode=" + shareCode
      );
    },
    photoAlbumImgUrl(value) {
      // console.log(12, value);

      if (!value) return "";
      return this.photoAlbumUrl(value);
    },
    onCancel() {
      uni.showToast({ title: '已取消', icon: 'none' });
      this.showPopup = false;
    },
    onConfirm() {
      this.getList()
    },
    // 校验分享码
    async checkCode() {
      let params = {
        shareCode: this.paramsObj.shareCode,
      }
      uni.request({
        url: '/api/sharePhoto/checkShareCode',
        method: 'get',
        header: {
          'Cache-Control': 'no-cache',
          'Pragma': 'no-cache',
          "content-type": "application/json",
        },
        data: params,
        success: (res) => {
          if (res.statusCode === 200) {
            console.log('checkCode：', res.data);
            let resData = res.data
            if (resData.code != 200) {
              uni.showToast({
                title: resData.msg,
                icon: 'none',
                duration: 2000
              });
              return
            }
            if (!resData.data) {
              this.showPopup = true;
              uni.showToast({
                title: '无效分享',
                icon: 'none',
                duration: 2000
              });
            } else {
              this.showPopup = true;
            }

          }
        },
        fail: (err) => {
          console.log('GET 请求失败', err);
        }
      });
    },
    // 根据id去重
    uniqueById(arr) {
      return arr.filter((item, index) => {
        return arr.findIndex(obj => obj.id === item.id) === index;
      });
    },
    // onReachBottom() {
    //   if (this.listDataLoading == 'loadmore') {
    //     this.crrPage++;
    //     this.getList();
    //   }
    // },
    getList() {
      this.listDataLoading = 'loading';
      uni.showLoading({
        title: '数据加载中...'
      });
      if (this.crrPage == 1) {
        this.imageList = [];
      }
      let params = {
        shareCode: this.paramsObj.shareCode,
        password: this.formData.pwd
      }
      uni.request({
        url: '/api/sharePhoto/album',
        method: 'get',
        header: {
          'Cache-Control': 'no-cache',
          'Pragma': 'no-cache',
          "content-type": "application/json",
        },
        data: params,
        success: (res) => {
          if (res.statusCode === 200) {
            if (res.data.code != 200) {
              uni.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 2000
              });
              return
            }
            console.log('获取相册数据', res.data);
            let resData = res.data.data
            this.isDownload = resData.optDownload
            this.isUpload = resData.optUpload
            this.isRemove = resData.optRemove
            uni.hideLoading();
            this.showPopup = false;
            if (resData.results && resData.results.length) {
              this.imageList = this.uniqueById(this.imageList.concat(resData.results));
              this.listDataLoading = 'loadmore';
            } else {
              this.listDataLoading = 'nomore';
            }

          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail: (err) => {
          console.log('GET 请求失败', err);
        }
      });

    },

    // 切换编辑模式
    toggleEditMode() {
      this.isEditMode = !this.isEditMode
      if (!this.isEditMode) {
        this.selectedIndices = []
        this.isAllSelected = false
      }
    },

    // 处理图片点击
    handleImageClick(index, id) {
      if (this.isEditMode) {
        // 选中编辑
        this.toggleSelect(index, id)
      } else {
        // 预览
        this.previewImage(index)
      }
    },
    previewImage(index) {
      this.currentPreviewIndex = index;
      this.previewVisible = true;
    },
    closePreview() {
      this.previewVisible = false;
    },
    onPreviewIndexChange(index) {
      this.currentPreviewIndex = index;
    },
    getModifiedUrl(originalUrl) {
      const urlObj = new URL(originalUrl);
      urlObj.pathname = urlObj.pathname.replace("/api/", "/");
      const modifiedUrl = urlObj.toString();
      return modifiedUrl
    },
    downloadImage(image) {
      let api = this.$api.api
      let url = api + this.photoAlbumImgUrl(image.id)
      const a = document.createElement('a')
      a.href = this.getModifiedUrl(url)
      a.download = `image_${this.currentPreviewIndex + 1}.jpg` //  `image_${this.currentPreviewIndex + 1}.jpg`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    // 删除图片
    deleteImage(image, index) {
      let params = {
        ids: image && [image.id],
        password: this.formData.pwd,
        shareCode: this.paramsObj.shareCode,
      }
      if (image && image.createUser) {
        // 非当前用户的图片不能删除
        uni.showToast({
          title: '非当前用户的图片不能删除',
          icon: 'none'
        })
        return
      }
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        confirmColor: '#850C13',
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: '/api/sharePhoto/remove',
              method: 'post',
              header: {
                'Cache-Control': 'no-cache',
                'Pragma': 'no-cache',
                "content-type": "application/json",
              },
              data: params,
              success: (res) => {
                if (res.statusCode === 200) {
                  console.log('remove：', res.data);
                  if (res.data.code != 200) {
                    uni.showToast({
                      title: res.data.msg,
                      icon: 'none',
                      duration: 2000
                    });
                    return
                  }
                  // 从列表中删除
                  this.imageList.splice(index, 1);
                  // 如果删除的是最后一张且当前显示的就是这张
                  if (index === this.currentPreviewIndex && index >= this.imageList.length) {
                    this.currentPreviewIndex = Math.max(0, this.imageList.length - 1);
                  }
                  // 如果图片列表为空，关闭预览
                  if (this.imageList.length === 0) {
                    this.closePreview();
                  }
                  uni.showToast({ title: '删除成功', icon: 'success' });
                  this.getList()
                }
              },
              fail: (err) => {
                console.log('GET 请求失败', err);
              }
            });
            // if (res.code == 200) {
            //   // 从列表中删除
            //   this.imageList.splice(index, 1);
            //   // 如果删除的是最后一张且当前显示的就是这张
            //   if (index === this.currentPreviewIndex && index >= this.imageList.length) {
            //     this.currentPreviewIndex = Math.max(0, this.imageList.length - 1);
            //   }

            //   // 如果图片列表为空，关闭预览
            //   if (this.imageList.length === 0) {
            //     this.closePreview();
            //   }

            //   uni.showToast({ title: '删除成功', icon: 'success' });
            // }

          }
        }
      });
    },

    // 切换选择状态
    toggleSelect(index, id) {
      console.log(this.selectedIndices, this.imageList[index].id);
      // if (this.imageList[index].createUser) {
      //   // 非当前用户的图片不能删除
      //   uni.showToast({
      //     title: '非当前用户的图片不能删除',
      //     icon: 'none'
      //   })
      // } else {
      const idx = this.selectedIndices.indexOf(id)
      if (idx > -1) {
        this.selectedIndices.splice(idx, 1)
      } else {
        this.selectedIndices.push(id)
      }
      this.checkAllSelected()
      // }

    },

    // 全选/取消全选
    toggleSelectAll() {
      if (this.isAllSelected) {
        this.selectedIndices = []
      } else {
        this.selectedIndices = this.imageList.map((item, index) => item.id)
      }
      this.isAllSelected = !this.isAllSelected
    },

    // 检查是否全部选中
    checkAllSelected() {
      this.isAllSelected = this.selectedIndices.length === this.imageList.length
    },
    async downloadImageWithBlob(url, filename = 'image') {
      try {
        // 添加 { mode: 'cors' } 选项
        const response = await fetch(url, {
          mode: 'cors',
          credentials: 'include' // 如果需要携带cookie
        });

        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename.includes('.') ? filename : `${filename}.${blob.type.split('/')[1] || 'jpg'}`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      } catch (error) {
        console.error('下载失败:', error);
        uni.showToast({ title: `下载失败: ${error.message}`, icon: 'none' });
        throw error; // 重新抛出错误以便批量下载时可以处理
      }
    },
    // 选择批量下载
    async startBatchDownload() {
      if (this.selectedIndices.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        })
        return
      }
      let api = this.$api.api
      uni.showLoading({ title: `正在下载`, mask: true })
      let urlArr = this.selectedIndices.map(item => {
        return this.getModifiedUrl(`${api}${this.photoAlbumImgUrl(item)}`)
      })
      console.log('批量下载图片', urlArr);

      for (let i = 0; i < urlArr.length; i++) {
        try {
          uni.showLoading({ title: `正在下载(${i + 1}/${urlArr.length})`, mask: true })
          const a = document.createElement('a')
          a.href = urlArr[i]
          a.download = `image_${i + 1}.jpg`
          document.body.appendChild(a)
          a.click()
          // document.body.removeChild(a)
          // await this.downloadImageWithBlob(urlArr[i], `image_${i + 1}.jpg`)
        } catch (error) {
          console.error(`第 ${i + 1} 张图片下载失败:`, error)
        }
      }

      uni.hideLoading()
      uni.showToast({ title: `下载完成，成功 ${urlArr.length} 张`, icon: 'success' })
      return
      this.isDownloading = true;
      this.isCanceled = false;
      this.progress = {
        current: 0,
        total: this.selectedIndices.length,
        percent: 0,
        speed: '0KB/s'
      };

      try {
        // 分批下载控制
        const batchCount = Math.ceil(this.selectedIndices.length / this.maxConcurrent);
        const startTime = Date.now();
        let lastUpdateTime = startTime;
        let lastDownloaded = 0;

        for (let i = 0; i < batchCount; i++) {
          if (this.isCanceled) break;

          const startIdx = i * this.maxConcurrent;
          const endIdx = Math.min(startIdx + this.maxConcurrent, this.selectedIndices.length);
          let batch = this.selectedIndices.slice(startIdx, endIdx);

          batch = batch && batch.map(item => {
            return {
              id: item,
              url: this.photoAlbumImgUrl(item)
            }
          })
          // 并发下载当前批次
          const results = await Promise.all(
            batch.map(img => this.downloadWithProgress(img))
          );

          // 更新进度
          this.progress.current = Math.min(
            this.progress.current + batch.length,
            this.progress.total
          );

          // 计算下载速度
          const now = Date.now();
          if (now - lastUpdateTime > 1000) {
            const timeDiff = (now - startTime) / 1000;
            const downloaded = this.progress.current;
            const speed = ((downloaded - lastDownloaded) * 300) / 1024; // 假设平均300KB/张
            this.progress.speed = speed > 1024
              ? `${(speed / 1024).toFixed(1)}MB/s`
              : `${Math.round(speed)}KB/s`;
            lastUpdateTime = now;
            lastDownloaded = downloaded;
          }

          this.progress.percent = Math.round(
            (this.progress.current / this.progress.total) * 100
          );
        }

        if (!this.isCanceled) {
          uni.showToast({ title: '下载完成', icon: 'success' });
        }
      } catch (error) {
        uni.showToast({ title: '下载出错', icon: 'none' });
      } finally {
        this.isDownloading = false;
        this.downloadTasks = [];
      }
    },

    async downloadWithProgress(image) {

      const task = downloadSingleImage(image, {
        headers: {
          // Authorization: 'xy-bearer ' + uni.getStorageSync('xyk_token'),
        },
        onProgress: (res) => {
          // 单个文件下载进度（可选）
        }
      });

      this.downloadTasks.push(task);
      return task;
    },
    // 取消下载
    // cancelDownload() {
    //   this.isCanceled = true;
    //   this.progressColor = '#FF9900';

    //   // 取消所有下载任务
    //   this.downloadTasks.forEach(task => {
    //     if (task.abort) task.abort();
    //   });

    //   uni.showToast({ title: '正在取消下载...', icon: 'none' });
    // },

    // 从服务器获取图片
    async getImageFromServer(imageId) {
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url: `${this.$baseUrl}/api/photo/download?id=${imageId}`,
          header: {
            // 如果需要认证，添加token
            Authorization: 'xy-bearer ' + uni.getStorageSync('xyk_token'),
            'Content-Type': 'application/octet-stream'
          },
          success: (res) => {

            if (res.statusCode === 200) {
              resolve(res.tempFilePath);
            } else {
              reject(new Error(`服务器错误: ${res.statusCode}`));
            }
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    },

    // 保存图片到相册
    async saveImageToAlbum(tempFilePath) {
      return new Promise((resolve, reject) => {
        // 检查权限
        uni.getSetting({
          success: (res) => {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              // 未授权，请求授权
              uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                  this.doSaveImage(tempFilePath, resolve, reject);
                },
                fail: () => {
                  reject(new Error('用户拒绝了相册权限'));
                }
              });
            } else {
              // 已授权，直接保存
              this.doSaveImage(tempFilePath, resolve, reject);
            }
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    },

    // 执行保存操作
    doSaveImage(tempFilePath, resolve, reject) {
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          resolve();
        },
        fail: (err) => {
          reject(err);
        }
      });
    },

    // 删除选中图片
    deleteSelected() {
      if (this.selectedIndices.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        })
        return
      }
      let params = {
        ids: this.selectedIndices,
        password: this.formData.pwd,
        shareCode: this.paramsObj.shareCode,
      }
      uni.showModal({
        title: '提示',
        content: `确定要删除选中的${this.selectedIndices.length}项相册图片？`,
        confirmColor: '#850C13',
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: '/api/sharePhoto/remove',
              method: 'post',
              header: {
                'Cache-Control': 'no-cache',
                'Pragma': 'no-cache',
                "content-type": "application/json",
              },
              data: params,
              success: (res) => {
                if (res.statusCode === 200) {
                  if (res.data.code != 200) {
                    uni.showToast({
                      title: res.data.msg,
                      icon: 'none',
                      duration: 2000
                    });
                    return
                  }
                  console.log('remove：', res.data);
                  this.selectedIndices = []
                  this.isAllSelected = false
                  this.isEditMode = false
                  this.getList()
                  uni.showToast({
                    title: "删除成功",
                    icon: "none"
                  })
                }
              },
              fail: (err) => {
                console.log('GET 请求失败', err);
              }
            });

          }
        }
      })
    },

    // 打开上传面板
    openUpload() {
      this.$refs.uploadPopup.open()
    },

    // 关闭上传面板
    closeUpload() {
      this.$refs.uploadPopup.close()
    },
    // 从相册选择图片
    chooseImage() {
      uni.chooseImage({
        // count: this.maxLength,
        sizeType: ['original', 'compressed'], // compressed压缩图
        sourceType: ['album'],
        success: (res) => {
          console.log(res, '从相册选择图片');

          const tempFilePaths = res.tempFilePaths; // 临时文件路径
          this.uploadImage(tempFilePaths);
        },
        fail: (err) => {
          // 失败回调
          console.error(err);
          if (err.errMsg && err.errMsg.includes('max count')) {
            uni.showToast({
              title: `最多只能选择${this.maxLength}张图片`,
              icon: 'none',
              duration: 2000
            });
          } else {
            uni.showToast({
              title: '选择图片失败',
              icon: 'none',
              duration: 2000
            });
          }
        }
        // fail: (err) => {
        //   console.error('选择图片失败:', err)
        // }
      })
    },
    uploadImage(tempFilePath) {
      uni.showLoading({
        title: "上传中"
      })
      const formData = {
        password: this.formData.pwd,
        shareCode: this.paramsObj.shareCode,
      };

      // 多文件上传（微信小程序本身不支持直接传数组，需循环上传或后端兼容）
      // 注意：微信小程序的 uni.uploadFile 一次只能传一个文件
      tempFilePath.forEach((filePath, index) => {
        console.log(filePath, 'filePathfilePathfilePath');

        uni.uploadFile({
          url: 'api/sharePhoto/upload',
          filePath: filePath, //需要上传的文件路径
          name: 'files', // 后端接收的字段名
          formData: formData, // 额外参数
          header: {
            // 'Content-Type': 'multipart/form-data'
          },
          success: (res) => {
            uni.hideLoading()
            console.log(`文件 ${index + 1} 上传成功:`, res.data);
            let resData = JSON.parse(res.data)
            console.log(resData, 'V');
            if (resData.code != 200) {
              uni.showToast({
                title: resData.msg,
                icon: 'none',
                duration: 2000
              });
              return
            }
            this.getList();

          },
          fail: (err) => {

            console.error(`文件 ${index + 1} 上传失败:`, err);
          }
        });
      });
    },
    // 拍照
    takePhoto() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['camera'],
        success: (res) => {
          const newImages = res.tempFilePaths.map(url => ({
            url: url,
            type: 'image'
          }))
          this.imageList = [...this.imageList, ...newImages]
          this.closeUpload()
        },
        fail: (err) => {
          console.error('拍照失败:', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.album-detail {
  padding-bottom: 20rpx;
}

.progress-container {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  position: absolute;
  top: 262rpx;
  left: 76rpx;
  z-index: 100;

  .progress-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #666;
    // margin-bottom: 10rpx;
    padding: 0 20rpx;

    .content-text {
      font-size: 28rpx;
      color: #333333;
      letter-spacing: 1px;
    }
  }

  .progress-warps {
    width: 360rpx;
    height: 8rpx;
    background: #F5F5F6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
}




/* 自定义导航栏 */
.custom-nav {
  width: 100%;
  padding: 8rpx 30rpx;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  background-color: #fff;
  z-index: 99;
  .nav-edit {
    width: 60rpx;
    text-align: right;
    text {
      font-size: 30rpx;
      color: #850C13;
    }
  }
}

/* 操作工具栏 */
.action-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  position: fixed;
  bottom: 0rpx;
  left: 0;
  background-color: #fff;
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx 0;
    
    .download {
      width: 48rpx;
      height: 48rpx;
    }

    .upload {
      width: 48rpx;
      height: 48rpx;
    }

    .del {
      width: 48rpx;
      height: 48rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
      line-height: 32rpx;
      letter-spacing: 1px;
      margin-top: 8rpx;
    }
  }
}

/* 图片网格 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  margin-top: 60rpx;
  margin-bottom: 140rpx;
}

.image-item,
.add-btn {
  width: calc(33.33% - 20rpx);
  height: 0;
  padding-bottom: calc(33.33% - 20rpx);
  margin: 10rpx;
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f5f5f5;

  image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx dashed #ccc;
}

.checkbox-wrapper {
  position: absolute;
  bottom: 8rpx;
  right: 0rpx;
  z-index: 2;
}

.video-tag {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
  padding: 4rpx 10rpx;
  display: flex;
  align-items: center;
}

/* 上传弹窗 */
.upload-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;

  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.upload-options {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  height: 120rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  .option-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30rpx;
    width: calc(100% - 30rpx);
    height: 88rpx;
    line-height: 88rpx;
    background: #850C13;
    border-radius: 10rpx;
    text-align: center;

    .upload-white {
      width: 48rpx;
      height: 48rpx;
      margin-right: 8rpx;

    }

    text {

      font-size: 36rpx;
      color: #FFFFFF;
      text-align: center;
      letter-spacing: 1px;
    }
  }
}


/* 在 app.wxss 或页面 wxss */
.uni-modal__btn_primary {
  color: red !important;
  /* 确认按钮文字颜色 */
}

.uni-modal__btn_default {
  color: green !important;
  /* 取消按钮文字颜色 */
}

.uni-modal__textarea {
  font-size: 24rpx;
}

.customize-input {
  width: 560rpx;
  height: 88rpx;
  margin-left: 40rpx;
  margin-bottom: 52rpx;
  margin-top: 64rpx;
  text-align: left;
}
</style>